<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery下拉菜单导航仿京东商城商品分类导航样式</title>
<meta name="description" content="jquery hover事件下拉菜单导航仿京东商城商品分类导航样式布局，通过鼠标滑过商品分类导航展示商品分类子菜单内容的效果。" />

<script type="text/javascript" src="../../jquery/lib/jquery.skin.js"></script>
<script type="text/javascript">
(function($){
	$.fn.hoverForIE6=function(option){
		var s=$.extend({current:"hover",delay:10},option||{});
		$.each(this,function(){
			var timer1=null,timer2=null,flag=false;
			$(this).bind("mouseover",function(){
				if (flag){
					clearTimeout(timer2);
				}else{
					var _this=$(this);
					timer1=setTimeout(function(){
						_this.addClass(s.current);
						flag=true;
					},s.delay);
				}
			}).bind("mouseout",function(){
				if (flag){
					var _this=$(this);timer2=setTimeout(function(){
						_this.removeClass(s.current);
						flag=false;
					},s.delay);
				}else{
					clearTimeout(timer1);
				}
			})
		})
	}
})(jQuery);
</script>
<link href="demo.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="navsort">

	<div class='allsort'>
		
		<div class='mt'><strong><a href="">全部商品分类</a></strong><div class='extra'>&nbsp;</div></div>
		
		<div class='mc'>
			<div class='item fore'>
				<span><h3><a href="">图书</a></h3><s></s></span>
				<div class='i-mc'>
					<div class='close' onclick="$(this).parent().parent().removeClass('hover')"></div>
					<div class='subitem'>
						<dl class='fore'>
							<dt>文艺</dt>
							<dd>
								<em><a href=''>小说</a></em>
								<em><a href=''>文学</a></em>
								<em><a href=''>青春文学</a></em>
								<em><a href=''>传记</a></em>
								<em><a href=''>艺术</a></em>
							</dd>
						</dl>
						<dl>
							<dt>少儿</dt>
							<dd>
								<em><a href=''>少儿</a></em>
								<em><a href=''>0-2岁</a></em>
								<em><a href=''>3-6岁</a></em>
								<em><a href=''>7-10岁</a></em>
								<em><a href=''>11-14岁</a></em>
							</dd>
						</dl>
					</div>
					<div id="JD_sort_k" class='fr'>
						<img src="images/1593.jpg" width="194" height="70" alt="" style="margin-top:30px;" />
					</div>
				</div>
			</div>
			
			<div class='extra'><a href=''>全部商品分类</a></div>
		
		</div>
		
	</div><!--allsort end-->
	
	<div class="searcbox"></div>
	
	<div class="carbox"></div>
	
</div>	
	
<script type="text/javascript"> 
$(".allsort").hoverForIE6({current:"allsorthover",delay:200});
$(".allsort .item").hoverForIE6({delay:150});
</script>

</body>
</html>
